<template>
    <div class="cart">
        <div class="item" v-for="(item,index) in carts" :key="index">
            <div class="tb" @click="getselected(item.id,item.selected)">
                <img v-show="checked === item.selected?true:false" src="./../assets/imgs/icon/active.png" alt="">
                <img v-show="checked === item.selected?false:true" src="./../assets/imgs/icon/no-active.png" alt="">
            </div>
            <a href="">
                <img :src="item.get_cart.main_img_url" alt="">
            </a>
            <p class="price">￥{{item.get_cart.price}}</p>
            <div class="tptitle">
                <p>{{item.get_cart.name}}</p>
                <p><i class="cubeic-close"></i></p>
            </div>
            <div class="cartnum">
                <span>X{{item.goods_num}}</span>
            </div>
        </div>
        <van-submit-bar  :price="AllPrice" button-text="提交订单">
            <van-checkbox @click="updateCheckAll" v-model="allchecked">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script>
export default {
    name:"cart",
    data(){
        return {
            checked: "true",
            allchecked:true,
            carts:[],
            AllPrice:0,
        }
    },
    mounted(){
        this.getCates();
        this.getprice();
    },
    methods:{
        getCates(){
            this.axios.get('api/v1/getcarts').then((res)=>{
                this.carts = res.data.data;
                this.allchecked = res.data.selecteAll;
            }).catch((res)=>{
                return res
            })
        },
        //购物车总价格
        getprice(){
            this.axios.get('api/v1/firstGoodsTotalPrice').then((res)=>{
                this.AllPrice = res.data.goodsTotalPrice*100
            }).catch((res)=>{
                return res;
            })
        },

        ////修改购物车商品选中状态
        getselected(id,select){
            if(select === "true"){
                select = false;
            }else{
                select = true;
            }
            this.axios.get('api/v1/updataSelected',{
                params:{
                    goodsId:id,
                    selected:select
                }
            }).then((res)=>{
                //console.log(res);
                this.getprice();
                this.getCates();
            }).catch((err)=>{
                return err;
            })
        },

        //处理全选和反选
        updateCheckAll(){
            this.axios.get('api/v1/updateCheckAll',{
                params:{
                    selected:this.allchecked
                }
            }).then((res)=>{
                this.getprice();
                this.getCates();
            }).catch((err)=>{
                return err;
            })
        }
    }
}
</script>

<style lang="scss">
@import './../assets/scss/base.scss';
    .cart{
        .item{
            display: flex;
            height: 80px;
            padding:10px;
            border-bottom: 1px solid #eee;
            position: relative;
            .tb{
                display: flex;
                align-items: center;
                img{
                    width:20px;
                    height: 20px;
                }
            }

            a{
                img{
                    height: 80px;
                    width: 80px;
                    margin:0 10px;
                    border:1px solid #ccc;
                }
            }
            .tptitle{
                display: flex;
                flex:1;
                justify-content: space-between;
                p{
                    font-size: 14px;
                }
            }
            .price{
                position: absolute;
                right: 200px;
                bottom:10px;
                color:$colorA;
                font-size: 14px;
            }
            .cartnum{
                height: 25px;
                width: 80px;
                position: absolute;
                right: 10px;
                bottom:10px;
                text-align: center;
                line-height: 25px;
                span{
                    font-size: 14px;
                }
            }
        }
    }
</style>

